DataGrid - Fix the browser scrolling back to the grid when data is updated (T1310557) by markallenramirez · Pull Request #33168 · DevExpress/DevExtreme

markallenramirez · 2026-04-06T12:56:31Z

No description provided.

Copilot

Pull request overview

Fixes DataGrid keyboard-navigation focus restoration so that updating data doesn’t cause the browser to scroll the page back to the grid (by using native focus({ preventScroll }) during render completion).

Changes:

Add a preventScroll flag to _updateFocus and _focus and propagate it from renderCompleted.
Replace synthetic eventsEngine.trigger(..., 'focus') with native DOM focus({ preventScroll }) for the focused cell/row.

packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts

Copilot

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/scrollable_a11y.ts

packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts

Copilot

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts

This reverts commit 8b4814d.

Copilot

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

Copilot · 2026-04-08T12:43:54Z

packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/focus.integration.tests.js

+        $('body').css('height', 2000);
+        window.scrollTo(0, 0);
+        this.clock.tick(10);
+
+        const keyboardController = dataGrid.getController('keyboardNavigation');
+        const $firstCell = $(dataGrid.getCellElement(0, 0));
+        const scrollPosition = 300;
+
+        // assert
+        assert.strictEqual(window.pageYOffset, 0, 'document scroll is at the top');
+
+        // act
+        $firstCell.trigger(CLICK_EVENT);
+        this.clock.tick(10);
+
+        keyboardController.keyDownHandler({
+            key: 'Tab',
+            keyName: 'tab',
+            originalEvent: $.Event('keydown', { target: $firstCell.get(0) }),
+        });
+        this.clock.tick(10);
+
+        // assert
+        assert.ok($(dataGrid.getCellElement(0, 1)).hasClass('dx-focused'), 'second cell is focused');
+
+        // act
+        window.scrollTo(0, scrollPosition);
+
+        // assert
+        assert.strictEqual(window.pageYOffset, scrollPosition, 'document scroll is changed');
+
+        // act
+        dataGrid.getDataSource().store().push([{ type: 'update', key: 1, data: { name: 'updated' } }]);
+        this.clock.tick(10);
+
+        // assert
+        assert.strictEqual($(dataGrid.getCellElement(0, 1)).text(), 'updated', 'second cell text is updated');
+        assert.strictEqual(window.pageYOffset, scrollPosition, 'document scroll is preserved after push update');
+
+        // act
+        dataGrid.refresh();
+        this.clock.tick(10);
+
+        // assert
+        assert.strictEqual(window.pageYOffset, scrollPosition, 'document scroll is preserved after refresh');
+
+        // act
+        dataGrid.repaint();
+        this.clock.tick(10);
+
+        // assert
+        assert.strictEqual(window.pageYOffset, scrollPosition, 'document scroll is preserved after repaint');
+
+        // act
+        keyboardController.keyDownHandler({
+            key: 'ArrowLeft',
+            keyName: 'leftArrow',
+            originalEvent: $.Event('keydown', { target: $(dataGrid.getCellElement(0, 1)).get(0) }),
+        });
+        this.clock.tick(10);
+
+        // assert
+        assert.ok($(dataGrid.getCellElement(0, 0)).hasClass('dx-focused'), 'first cell is focused');
+        assert.strictEqual(window.pageYOffset, 0, 'document scroll is changed after keyboard navigation');
+
+        // cleanup
+        $('body').css('height', '');
+        window.scrollTo(0, 0);


This test mutates global page state (body height and window scroll position) without a try/finally-style guard. If an exception occurs before the cleanup section, subsequent tests can run with a modified document height/scroll position. Consider capturing the initial body height/scroll position and restoring them in a finally block (or using an appended temporary spacer element like other scrolling-related tests do).

Suggested change

$('body').css('height', 2000);

window.scrollTo(0, 0);

this.clock.tick(10);

const keyboardController = dataGrid.getController('keyboardNavigation');

const $firstCell = $(dataGrid.getCellElement(0, 0));

const scrollPosition = 300;

// assert

assert.strictEqual(window.pageYOffset, 0, 'document scroll is at the top');

// act

$firstCell.trigger(CLICK_EVENT);

this.clock.tick(10);

keyboardController.keyDownHandler({

key: 'Tab',

keyName: 'tab',

originalEvent: $.Event('keydown', { target: $firstCell.get(0) }),

});

this.clock.tick(10);

// assert

assert.ok($(dataGrid.getCellElement(0, 1)).hasClass('dx-focused'), 'second cell is focused');

// act

window.scrollTo(0, scrollPosition);

// assert

assert.strictEqual(window.pageYOffset, scrollPosition, 'document scroll is changed');

// act

dataGrid.getDataSource().store().push([{ type: 'update', key: 1, data: { name: 'updated' } }]);

this.clock.tick(10);

// assert

assert.strictEqual($(dataGrid.getCellElement(0, 1)).text(), 'updated', 'second cell text is updated');

assert.strictEqual(window.pageYOffset, scrollPosition, 'document scroll is preserved after push update');

// act

dataGrid.refresh();

this.clock.tick(10);

// assert

assert.strictEqual(window.pageYOffset, scrollPosition, 'document scroll is preserved after refresh');

// act

dataGrid.repaint();

this.clock.tick(10);

// assert

assert.strictEqual(window.pageYOffset, scrollPosition, 'document scroll is preserved after repaint');

// act

keyboardController.keyDownHandler({

key: 'ArrowLeft',

keyName: 'leftArrow',

originalEvent: $.Event('keydown', { target: $(dataGrid.getCellElement(0, 1)).get(0) }),

});

this.clock.tick(10);

// assert

assert.ok($(dataGrid.getCellElement(0, 0)).hasClass('dx-focused'), 'first cell is focused');

assert.strictEqual(window.pageYOffset, 0, 'document scroll is changed after keyboard navigation');

// cleanup

$('body').css('height', '');

window.scrollTo(0, 0);

const $body = $('body');

const initialBodyHeight = $body.css('height');

const initialScrollLeft = window.pageXOffset;

const initialScrollTop = window.pageYOffset;

$body.css('height', 2000);

window.scrollTo(0, 0);

this.clock.tick(10);

try {

const keyboardController = dataGrid.getController('keyboardNavigation');

const $firstCell = $(dataGrid.getCellElement(0, 0));

const scrollPosition = 300;

// assert

assert.strictEqual(window.pageYOffset, 0, 'document scroll is at the top');

// act

$firstCell.trigger(CLICK_EVENT);

this.clock.tick(10);

keyboardController.keyDownHandler({

key: 'Tab',

keyName: 'tab',

originalEvent: $.Event('keydown', { target: $firstCell.get(0) }),

});

this.clock.tick(10);

// assert

assert.ok($(dataGrid.getCellElement(0, 1)).hasClass('dx-focused'), 'second cell is focused');

// act

window.scrollTo(0, scrollPosition);

// assert

assert.strictEqual(window.pageYOffset, scrollPosition, 'document scroll is changed');

// act

dataGrid.getDataSource().store().push([{ type: 'update', key: 1, data: { name: 'updated' } }]);

this.clock.tick(10);

// assert

assert.strictEqual($(dataGrid.getCellElement(0, 1)).text(), 'updated', 'second cell text is updated');

assert.strictEqual(window.pageYOffset, scrollPosition, 'document scroll is preserved after push update');

// act

dataGrid.refresh();

this.clock.tick(10);

// assert

assert.strictEqual(window.pageYOffset, scrollPosition, 'document scroll is preserved after refresh');

// act

dataGrid.repaint();

this.clock.tick(10);

// assert

assert.strictEqual(window.pageYOffset, scrollPosition, 'document scroll is preserved after repaint');

// act

keyboardController.keyDownHandler({

key: 'ArrowLeft',

keyName: 'leftArrow',

originalEvent: $.Event('keydown', { target: $(dataGrid.getCellElement(0, 1)).get(0) }),

});

this.clock.tick(10);

// assert

assert.ok($(dataGrid.getCellElement(0, 0)).hasClass('dx-focused'), 'first cell is focused');

assert.strictEqual(window.pageYOffset, 0, 'document scroll is changed after keyboard navigation');

} finally {

$body.css('height', initialBodyHeight);

window.scrollTo(initialScrollLeft, initialScrollTop);

}

Copilot · 2026-04-08T12:43:55Z

packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/focus.integration.tests.js

+    // T1310557
+    QUnit.testInActiveWindow('Browser should not scroll back to the grid when a focused cell is updated or rerendered', function(assert) {
+        // arrange


This scrolling/focus regression test is currently placed under the "Column Resizing" module, but it doesn't exercise resizing behavior. Moving it to a more relevant module (e.g., "View's focus" or a dedicated scrolling/focus module) will make the suite easier to navigate and maintain.

markallenramirez self-assigned this Apr 6, 2026

markallenramirez added the 26_1 label Apr 6, 2026

Copilot AI review requested due to automatic review settings April 6, 2026 12:56

Copilot started reviewing on behalf of markallenramirez April 6, 2026 12:57 View session

Copilot AI reviewed Apr 6, 2026

View reviewed changes

markallenramirez requested a review from a team as a code owner April 7, 2026 08:51

Copilot AI review requested due to automatic review settings April 7, 2026 08:55

Copilot started reviewing on behalf of markallenramirez April 7, 2026 08:56 View session

markallenramirez force-pushed the bug_T1310557/26_1 branch from a9afe9f to d2b9704 Compare April 7, 2026 08:56

Copilot AI reviewed Apr 7, 2026

View reviewed changes

packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/scrollable_a11y.ts Outdated Show resolved Hide resolved

packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts Outdated Show resolved Hide resolved

Copilot AI review requested due to automatic review settings April 8, 2026 09:04

Copilot started reviewing on behalf of markallenramirez April 8, 2026 09:05 View session

markallenramirez force-pushed the bug_T1310557/26_1 branch from 9ff69ab to 8b4814d Compare April 8, 2026 09:06

Copilot AI reviewed Apr 8, 2026

View reviewed changes

packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts Show resolved Hide resolved

markallenramirez added 7 commits April 8, 2026 20:36

spike

7046c2f

fix

2cdc94c

additional fix

1ecea84

typings

ab85233

testcafe

ebccff4

Revert "testcafe"

75e8214

This reverts commit 8b4814d.

qunit

6d35176

Copilot AI review requested due to automatic review settings April 8, 2026 12:36

markallenramirez force-pushed the bug_T1310557/26_1 branch from 4080b45 to 6d35176 Compare April 8, 2026 12:36

Copilot started reviewing on behalf of markallenramirez April 8, 2026 12:37 View session

Copilot AI reviewed Apr 8, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DataGrid - Fix the browser scrolling back to the grid when data is updated (T1310557)#33168

DataGrid - Fix the browser scrolling back to the grid when data is updated (T1310557)#33168
markallenramirez wants to merge 7 commits intoDevExpress:26_1from
markallenramirez:bug_T1310557/26_1

markallenramirez commented Apr 6, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 8, 2026

Uh oh!

Copilot AI Apr 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

markallenramirez commented Apr 6, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants